<template>
  <div>
    <header class="header">
      <router-link tag="div" to="/index" class="left"></router-link>
      <p class="title">登录</p>
    </header>

    <div class="re_form wrap">
      <input
        type="tel"
        placeholder="Please input your telephone"
        @blur="user_Id"
      />
      <input
        type="tel"
        placeholder="Please input your password"
        @blur="user_Psw"
      />

      <div class="checkbox">
        <div :class="['check', { con: agree }]" @click="agree = !agree"></div>
        <div class="text">
          同意
          <a
            href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other202009181421_79060.html"
            target="_blank"
          >
            《阿里文学说用户服务协议》
          </a>
          &nbsp;和&nbsp;
          <a
            href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other202009211152_29404.html"
            target="_blank"
          >
            《隐私服务协议》
          </a>
        </div>
      </div>
    </div>

    <footer>
      <div :class="['nextbox', 'wrap', { disabled: !isLogin }]" @click="login">
        <span>登录</span>
      </div>
      <router-link tag="div" to="/register" class="register">
        <span>注册</span>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: false,
      userPsw: false,
      agree: false,
      userInfo: null,
    };
  },
  methods: {
    // 验证手机号格式
    user_Id(e) {
      let rsg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (rsg.test(e.target.value)) {
        this.userId = e.target.value;
      } else {
        this.userId = false;
        this.$toast("请输入正确格式的账号");
      }
    },
    // 验证密码格式
    user_Psw(e) {
      let rsg = /^[0-9a-zA-z]\w{5,15}$/;
      if (rsg.test(e.target.value)) {
        this.userPsw = e.target.value;
      } else {
        this.userPsw = false;
        this.$toast("密码格式为6-16位数字字母组合");
      }
    },
    // 验证用户是否存在
    login() {
      let { userId, userPsw, agree, userInfo } = this; //解构

      // 判断当前账号密码格式是否正确以及是否点击同意协议和账号是否存在于数据库中
      if (userId && userPsw && agree && userId in userInfo) {
        if (userPsw == userInfo[userId].password) {
          // 将当前账号id存在本地中，用于路由守卫的判断
          localStorage.setItem("userId", userId);
          this.$toast("登录成功");
          this.$router.push("/my");
        } else {
          this.$toast("请检查账号密码");
        }
      }
    },
  },
  computed: {
    isLogin: function () {
      let { userId, userPsw, agree } = this;
      return userId && userPsw && agree;
    },
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
};
</script>

<style lang="scss" scoped>
header.header {
  height: 50px;
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  position: relative;
  padding: 0;

  > .left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    margin: auto;
    transform: rotate(180deg);
    background: url(https://easyreadfs.nosdn.127.net/web/trunk/1533607652166/icon_return.png)
      no-repeat;
    background-size: contain;
    width: 12px;
    height: 20px;
  }

  > .title {
    color: #333;
    font-weight: bold;
    line-height: 50px;
    font-size: 18px;
  }
}

.re_form {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 20px 0px;

  > input {
    border: 0;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 12px 13px;
    background: #f7f7fa;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 12px;

    &::placeholder {
      color: #ccc;
    }
  }

  > .slider {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: relative;
    background: #f7f7fa;
    border-radius: 4px;
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;

    > .mask {
      position: absolute;
      background: #23b383;
      height: 100%;
    }

    > .bar {
      z-index: 10;
      background: #fff;
      position: absolute;
      left: 0;
      top: 0px;
      border-radius: 4px;
      width: 43px;
      height: 43px;
      border: 1px solid #23b383;

      > i.iconfont {
        color: #23b383;
        position: absolute;
        left: -3px;
        margin: auto;
        font-size: 38px;
        font-weight: lighter;

        &:nth-child(2) {
          left: 8px;
        }
      }
    }
  }

  > .checkbox {
    height: 28px;
    width: 100%;
    display: flex;
    align-items: center;

    > .check {
      width: 20px;
      height: 20px;
      background: url(../assets/imgs/check1.png);
      background-size: contain;
      margin-right: 5px;

      &.con {
        background-image: url(../assets/imgs/check2.png);
      }
    }

    > .text {
      height: 28px;
      line-height: 28px;
      flex: 1;
      font-size: 12px;
      color: #a1a1a1;
      overflow: hidden;

      > a {
        color: #23b383;
      }
    }
  }
}

footer {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;

  > div {
    font-size: 14px;
    margin-top: 47px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #23b383;
    color: #fff;
  }

  .nextbox {
    width: 78%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;

    &.disabled {
      opacity: 0.5;
    }
  }

  .register {
    width: 19%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: -6px;
      height: 98%;
      width: 1px;
      background: #23b383;
      transform: scaleX(.5);
    }
  }
}
</style>